<div class="waper">
  <div>
    <h2>checkbox</h2>
    <label for="all">all</label>
    <input type="checkbox" [(ngModel)]="ff" id="all" (change)="turnAll(form)">
    <!-- ngSubmit 必须用在form标签里 -->
    <form [formGroup]="form" (ngSubmit)="onSubmit(form,$event)">
      <label for="one">one</label>
      <input type="checkbox" [checked]="form.get('one').value" id="one" formControlName="one" (change)="isAll()">
      <label for="two">two</label>
      <input type="checkbox" [checked]="form.get('two').value" id="two" formControlName="two" (change)="isAll()">
      <label for="three">three</label>
      <input type="checkbox" [checked]="form.get('three').value" id="three" formControlName="three" (change)="isAll()">
      <label for="four">four</label>
      <input type="checkbox" [checked]="form.get('four').value" id="four" formControlName="four" (change)="isAll()">
      <br>
      <button type="submit">submit</button>
    </form>
    <div>{{formGroupSelect | json}}</div>
  </div>
  <div>
    <h2>formArray</h2>
    <form [formGroup]="myForm">
      <div class="like" *ngFor="let like of likes['controls'];index as i;odd as odds">
        <label>
          <input type="checkbox" [formControl]="like"> {{likesArr[i]}} {{odds?' --偶数行':' --奇数行'}}
        </label>
      </div>
      <div *ngFor="let select of selects" class="youselect">{{select}}</div>
    </form>
  </div>
  <div>
    <h2>单独的，不需要form表单形式的</h2>
    <label style="width:30px;background:pink;margin-right:10px;">
      <input type="checkbox" name="item.id" id={{item.id}} value="{{item.id}}" #ite (change)="selectItem(item,ite)">
    </label>
    <label style="width:30px;background:rgb(206, 192, 255);margin-right:10px;">
      <input type="checkbox" [(ngModel)]="isCheckbox">
    </label>
    <span>{{isCheckbox}}</span>
    <br> data: {{seeItem |json}}
    <br> checked: {{ite.checked}}
  </div>
  <div>
    <h2>计时器</h2>
    <button (click)="start()">start</button>
    <button (click)="stop()">stop</button>
    {{time}}
  </div>
</div>
<div>
  <h2>可部署的图片写入方式</h2>
  <div class="allImg">
    <div>
      直接写入url字符串，用 [ ]:
      <br> [src]="'assets/1.jpg'"
      <img [src]="'assets/2.jpg'">

    </div>
    <div>
      直接写入url字符串，不用 [ ]:
      <br> src="assets/1.jpg"
      <img src="assets/2.jpg">
    </div>
    <div>
      来自网络
      <img [src]="imgData">
    </div>
    <div>
      用变量：
      <br>[src]="imgData2"
      <img [src]="imgData3">
    </div>
    <div>
      用双括号扩住变量：
      <br>src无中括号
      <img src="{{imgData2}}">
    </div>
  </div>
</div>